<template>
  <div class="container">
    <!-- 头部导航 -->
    <div class="index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">店铺资料<i class="el-icon-close"></i></div>
    </div>
    <div class="title">基础信息</div>
    <div class="container-box">
      <h3 class="marginb20">店铺资料</h3>
      <div class="content-form">
        <el-form ref="form" :model="form" label-position="left">
          <div class="form-logo marginb20">
            <div class="bg-logo df-c">
              <span class="mr50">头像</span>
              <el-upload
                class="avatar-uploader"
                action="/api/admin/base/uploadfile"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
                :before-upload="beforeLogoUpload"
              >
                <img
                  v-if="form.avatar"
                  :src="form.avatar.path"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div class="img-logo df-c">
              <span class="mr50">背景图</span>
              <el-upload
                class="avatar-uploader"
                action="/api/admin/base/uploadfile"
                :show-file-list="false"
                :on-success="handleImageSuccess"
                :before-upload="beforeImageUpload"
              >
                <img
                  v-if="form.back_thumb_url"
                  :src="form.back_thumb_url.path"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>

          <div class="form-item marginb20">
            <el-form-item label="店铺名称" label-width="80px">
              <el-input
                type="text"
                v-model="form.title"
                class="form-item-input"
              ></el-input>
            </el-form-item>
            <!-- <el-button type="text" @click="handleName" class="text">更改</el-button> -->
          </div>

          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="联系电话" label-width="80px">
                <el-input type="text" v-model="form.phone"></el-input>
              </el-form-item>
              <!-- <el-button type="text" @click="handlePhone" class="text">更改</el-button> -->
            </div>
            <div class="service">
              <el-form-item label="服务类型" label-width="80px">
                <!-- <el-input type="text"
                          v-model="form.service_id"
                          disabled></el-input> -->
                <el-select
                  v-model="service_type"
                  multiple
                  filterable
                  @change="selectService"
                  allow-create
                  value-key="id"
                  default-first-option
                  placeholder="请选择服务类型"
                >
                  <el-option
                    v-for="item in form.option_list.service_type"
                    :key="item.id"
                    :label="item.name"
                    :value="{ id: item.id, name: item.name }"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- <el-button type="text" @click="handleService" class="text">更改</el-button> -->
            </div>
          </div>

          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="从业年限" label-width="80px">
                <el-input
                  type="text"
                  v-model="form.employ_year"
                ></el-input> </el-form-item
              >年
              <!-- <el-button type="text" @click="handleYear" class="text">更改</el-button> -->
            </div>
            <div class="service">
              <el-form-item label="擅长风格" label-width="80px">
                <!-- <el-input type="text"
                          v-model="form.style_id"
                          disabled></el-input> -->
                <el-select
                  v-model="design_style"
                  multiple
                  filterable
                  value-key="id"
                  @change="selectStyle"
                  allow-create
                  default-first-option
                  placeholder="请选择擅长风格"
                >
                  <el-option
                    v-for="item in form.option_list.design_style"
                    :key="item.id"
                    :label="item.name"
                    :value="{ id: item.id, name: item.name }"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- <el-button type="text" @click="handleStyle" class="text">更改</el-button> -->
            </div>
          </div>

          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="起始报价" label-width="80px">
                <el-input
                  type="text"
                  class="priceInput"
                  v-model="form.start_offer"
                ></el-input> </el-form-item
              >/m²
            </div>
            <div class="tel-input">
              <el-form-item label="结尾报价" label-width="80px">
                <el-input
                  type="text"
                  class="priceInput"
                  v-model="form.end_offer"
                ></el-input> </el-form-item
              >/m²
            </div>
          </div>

          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="入驻卖场" label-width="80px">
                <el-select
                  v-model="form.market_id"
                  disabled
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in marketList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select> 
              </el-form-item>
            </div>
          </div>

          <div style="width: 50%" class="marginb20">
            <div class="tel-input">
              <el-form-item label="个性签名" label-width="80px">
                <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入个性签名"
                  v-model="form.sign"
                >
                </el-input>
              </el-form-item>
              <!-- <el-button type="text" @click="handleYear" class="text">更改</el-button> -->
            </div>
          </div>
        </el-form>
      </div>
      <div class="btn">
        <el-button type="primary" @click="submitSave">保存更改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        avatar: {
          id: "",
          path: "",
        },
        back_thumb_url: {
          id: "",
          path: "",
        },
        name: "",
        phone: "",
        service_id: "",
        start_offer: "",
        style_id: "",
        employ_year: "",
        designer_id: "",
        market_id: "",
      },
      marketList:[],//卖场列表
      service_type: [], //服务类型
      design_style: [], //设计风格
    };
  },
  mounted() {
    let sid = localStorage.getItem("sid");
    this.designer_id = sid;
    this.getDesignInfo();
    this.getMarketList();
  },
  methods: {
    getMarketList() {
      // 获取卖场列表
      this.$api.businessList().then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },

    // 获取设计师数据
    getDesignInfo() {
      let params = {
        id: this.designer_id,
      };
      this.$api.designerView(params).then((res) => {
        console.log("设计师数据", res);
        this.form = res.data;
        this.service_type = res.data.service_type;
        this.design_style = res.data.design_style;
      });
    },
    handleLogoSuccess(res, file) {
      // this.form.avatar.path = URL.createObjectURL(file.raw);
      console.log("图片上传1", file);
      let logoData = file.response.data;
      // this.form.avatar.path = logoData.url
      // this.form.avatar.id = logoData.id
      this.form.avatar = {
        path: logoData.url,
        id: logoData.id,
      };
      // let logo_id = logoData.id
      // let params = {
      //   file:this.form.avatar.path
      // }
      // this.$api.uploadfile(params).then(res=>{
      //       console.log('123',res);
      // })
    },
    beforeLogoUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleImageSuccess(res, file) {
      // this.form.back_thumb_url.path = URL.createObjectURL(file.raw);
      console.log("图片上传1", file);
      let logoData = file.response.data;
      // this.form.back_thumb_url.path = logoData.url
      // this.form.back_thumb_url.id = logoData.id
      this.form.back_thumb_url = {
        path: logoData.url,
        id: logoData.id,
      };
      // this.logo_id = logoData.id
    },
    beforeImageUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 选择服务类型
    selectService(e) {
      console.log(e, "服务类型");
    },

    // 选择擅长风格
    selectStyle(e) {
      console.log(e, "擅长风格");
    },
    handleName() {
      this.$prompt("请输入名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // inputPattern: /[\u4E00-\u9FA5]{1,8}/,
        inputErrorMessage: "名称格式不正确，1-8位汉字",
      })
        .then(({ value }) => {
          this.form.title = value;
          // this.after_data = value
          // let params={
          //   designer_id : this.designer_id,
          //   before_data : JSON.stringify({name:this.form.name}),
          //   after_data : JSON.stringify({name:value})
          // }
          // this.$api.applyChange(params).then(res=>{
          //   console.log('修改',res);
          //   if(res.code===1){
          //     this.$message({
          //     type: 'success',
          //     message: '修改成功，等待管理员审核...'
          //   });
          //   }
          // })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handlePhone() {
      this.$prompt("请输入手机号码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // inputPattern: /[^1[3456789]\d{9}$/,
        inputPattern: /^1[3456789]\d{9}$/,
        inputErrorMessage: "手机号格式不正确",
      })
        .then(({ value }) => {
          this.form.phone = value;
          // this.$message({
          //   type: 'success',
          //   message: '你的手机号码是: ' + value
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handleService() {
      this.$prompt("请输入服务类型", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.form.service_id = value;
          // this.$message({
          //   type: 'success',
          //   message: '你的服务类型是: ' + value
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handleOffer() {
      this.$prompt("请输入设计报价", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.form.start_offer = value;
          // this.$message({
          //   type: 'success',
          //   message: '你的设计报价是: ' + value
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handleStyle() {
      this.$prompt("请输入设计风格", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.form.style_id = value;
          // this.$message({
          //   type: 'success',
          //   message: '你的设计风格是: ' + value
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handleYear() {
      this.$prompt("请输入从业年限", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.form.employ_year = value;
          // this.$message({
          //   type: 'success',
          //   message: '你的从业年限是: ' + value
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    // 保存更改按钮
    submitSave() {
      console.log(this.form, "修改数据");
      let serviceId = [];
      this.service_type.map((item) => {
        serviceId.push(item.id);
      });

      let styleId = [];
      this.design_style.map((item) => {
        styleId.push(item.id);
      });

      this.form.service_type = serviceId.join(",");
      this.form.design_style = styleId.join(",");

      this.form.avatar = this.form.avatar.id;
      this.form.back_thumb_url = this.form.back_thumb_url.id;
      this.$http
        .post("/api/admin/designer/designer/edit", this.form)
        .then((res) => {
          console.log(res, "修改数据");
          if (res.code == 1) {
            this.$message.success("修改成功");
            this.getDesignInfo();
          } else {
            this.$message.warning(res.msg);
          }
        });
    },
  },
};
</script>

<style scoped lang="less">
.current {
  padding-left: 20px;
}
.marginb20 {
  margin-bottom: 20px;
}
.form-logo {
  padding: 0 10px;
}
.form-item {
  display: flex;
  // justify-content: space-between;
  align-items: center;

  .el-form-item {
    /* width: 1490px; */
    width: 95%;
  }
}
.text {
  font-size: 12px;
  color: #5692fa;
  margin-left: 10px;
}

.content-form .el-form-item {
  margin-bottom: 0 !important;
}

.form-tel {
  display: flex;
  .tel-input {
    margin-right: 240px;
    display: flex;
    align-items: center;
    .priceInput {
      min-width: 100px;
    }
  }
  .change {
    font-size: 12px;
    color: #5692fa;
    margin-left: 10px;
  }
  .service {
    display: flex;
    align-items: center;
  }
}
.form-time {
  display: flex;
}
.service-time {
  margin-right: 100px;
  margin-left: 8px;
}
.form-textarea {
  padding-left: 14px;
  .el-form-item {
    display: flex;
  }
}
.submit-btn {
  padding: 0 0 50px 0;
}

//图片上传样式
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
}
.form-logo {
  display: flex;
}
.bg-logo {
  margin-right: 250px;
}
.btn {
  width: 100%;
  text-align: center;
  margin: 50px 0;
}
</style>